<template>
  <button
    :class="[rippleBtn, 'negative-btn-' + size, type ? 'negative-btn-' + type : '']"
    :type="nativeType"
    @click="handleClick"
    v-show="value != ''"
  >
    {{ value }}
  </button>
</template>

<script>
export default {
  name: 'fyNegativeButton',
  data() {
    return {
      color: '',
      radius: 0,
      oCanvas: null,
      context: null,
      initialized: false,
      speedOpacity: 0,
      timer: null,
      rippleBtn: 'negative-btn-',
    }
  },
  props: {
    speed: {
      type: Number,
      default: 3,
    },
    /* 透明度 */
    opacity: {
      type: Number,
      default: 0.4,
    },
    /* 按钮的类型
      默认是 button类型
      可选 submit / reset

    */
    nativeType: {
      type: String,
      default: 'button',
    },
    /* 按钮的字体 */
    value: {
      type: String,
      default: '',
    },
    /* 按钮的大小
       默认 'medium'
       small: 小号按钮
       large： 大号按钮
    */
    size: {
      type: String,
      default: 'medium',
    },
    /*
      按钮的类型
      default 默认样式
      danger 危险
      success 成功
      info 信息
      primary 原始
      warning 警告

    */
    type: {
      type: String,
      default: 'default',
    },
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    },
  },

}
</script>

<style lang="scss" scoped>
@import url('~@css/public/reset.scss');
@import '@css/globalCite/defaultVariable.scss';
@import '@css/globalCite/defaultThemeVariable.scss';
@import '@css/globalCite/themeMixin.scss';
// @import '~@css/components/headTitle/fyHeadTitle.scss';
.negative- {
  &btn- {
    position: relative;
    box-sizing: border-box;
    margin: 0 11px;
    margin-bottom: 10px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-family: $font-family;
    font-size: $font-size-14;
    color: $color-fff;
    text-align: center;
    background: $color-999;


    // 页面中，表格内按钮
    &small {
      box-sizing: border-box;
      padding: 13px 17px;
      margin: 0 10px;
      line-height: 12px;
      font-size: $font-size-14;
      letter-spacing: 2px;
      border-radius:20px;
      cursor: pointer;
    }
    // 浮动导航栏中按钮
    &medium {
      box-sizing: border-box;
      min-width: 100px;
      line-height: 12px;
      margin: 0; 
      padding: 9px 20px;
      border-radius: 15px;
      font-size: $font-size-14;
      font-weight: $font-weight-700;
      letter-spacing: 2px;
    }
    
    &large {
      box-sizing: border-box;
      display: block;
      width: 92%;
      margin: 10px auto;
      padding: 12px 0 15px 0;
      line-height: 12px;
      font-size: $font-size-18;
      font-weight: $font-weight-600;
      
    }
    
    
    
    &danger {
      background: $color-f56c6c;
    }
    &primary {
      background: $color-66b1ff;
    }
    &info {
      background: $color-82848a;
    }
    &success {
      background: $color-67c23a;
    }
    &warning {
      background: $color-e6a23c;
    }
  }

  &ripple {
    overflow: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
}
</style>
